<template>
  <div class="index">
  <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <!-- slides -->
    <swiper-slide class="slide"  v-for="(item, index) in banners" :key="index">
      <a  :href="item.url" class="banner_img">
      <img :src="item.imgUrl" class="banner_pic" :alt="item.alt"  align="middle">
      </a>
     </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
    <a href="/good?type=discount&state=discount" class="banner_img">
      <img src="http://oyrubm1mf.bkt.clouddn.com/slider_05.jpg" class="banner_pic" alt="优惠泰国">
    </a>
    <a href="/good?type=fun&state=fun" class="banner_img">
      <img src="http://oyrubm1mf.bkt.clouddn.com/slider_03.jpg?" class="banner_pic" alt="玩乐泰国">
    </a>

     <a href="/good?type=shop&state=shop" class="banner_img">
      <img src="http://oyrubm1mf.bkt.clouddn.com/slider_02.jpg" class="banner_pic" alt="购物泰国">
    </a>

    <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
                 @ready="playerReadied">
       </video-player>
 
</div>

</template>

<script>
  // import cMenu from '@/components/menu'
  export default {
    name: 'carrousel',
    data () {
      return {
        banners: [{
          url: `/good?type=eat&state=eat`,
          imgUrl: `http://oyrubm1mf.bkt.clouddn.com/slider_01.jpg`,
          alt: `吃喝泰国`
        }, {
          url: `/good?type=flight&state=flight`,
          imgUrl: `http://oyrubm1mf.bkt.clouddn.com/slider_06.jpeg`,
          alt: `航班泰国`
        }],
        notNextTick: true,
        swiperOption: {
          autoplay: 3000,
          grabCursor: true,
          setWrapperSize: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          scrollbar: '.swiper-scrollbar',
          mousewheelControl: true,
          observeParents: true,
          loop: true,
          // if you need use plugins in the swiper, you can config in here like this
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
          debugger: false
        },
        playerOptions: {
          // videojs options
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: 'video/mp4',
            src: 'http://oz73memb0.bkt.clouddn.com/tvcamazingthai.mp4'
          }],
          poster: 'http://oxr1zyhnm.bkt.clouddn.com/video001.jpeg'
        }
      }
    },
    methods: {
        // player is ready
      playerReadied (player) {
      // console.log(player)
        player.dimension('height', 200)
        player.currentTime(10)
      }
    },

    // you can find current swiper instance object like this, while the notNextTick property value must be true
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      },
      player () {
        return this.$refs.videoPlayer.player
      }
    },
    mounted () {
      // console.log('this is current swiper instance object', this.swiper)
    }
  }
</script>
<style src="../style/video.less"></style>
